<template>
  <el-row :gutter="20" style="margin: 0">
    <el-col :span="6">
      <el-form-item label="参与人员" prop="examType">
        <el-radio-group v-model="form.examType" @change="examTypeChange">
          <el-radio
            style="margin: 0 6px 16px 0"
            v-if="parseInt(form.type) !== 3"
            :disabled="form.status"
            :label="0"
            border
          >全员参加
          </el-radio>
          <el-radio
            style="margin: 0"
            :disabled="form.status || form.publisherType === 'noEdit'"
            :label="1"
            border
          >选人参与
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button v-if="form.examType == 1" type="primary" @click="batchImportHandle()">批量导入</el-button>
      </el-form-item>
      <el-form-item prop="userIds" v-if="form.examType">
        <div class="exam-user-arr">
          <!--:type="parseInt(item.gender) === 1?'success':'danger'"-->
          <!--effect="dark"-->
          <el-tag
            v-for="(item,index) in setUserList"
            :key="index"
            :closable="!item.isEdit"
            style="margin: 2px"
            @close="examUserArrClose(item,index)"
          >{{ item.realname }}
          </el-tag>
        </div>
        <button type="primary" @click="clear()">清空</button>
        <span>已选择{{setUserList.length}}人</span>

      </el-form-item>
    </el-col>
    <el-col :span="18" v-show="form.examType">
      <search-form
        ref="searchForm"
        :url="{'getList':'/usercenter-admin/user/list'}"
        :setData="setData"
        :setLoading="setLoading"
        :setTotalPage="setTotalPage"
        :pagination="pagination"
        :setPage="setPage"
      />
      <el-table
        ref="userList"
        :data="userList"
        max-height="330"
        :cell-style="{padding:'2px 0'}"
        :header-cell-style="{padding:'2px 0'}"
      >
        <el-table-column width="50">
          <template slot="header" slot-scope="scope">
            <el-button type="text" :t="scope" @click="checkAll()">全选</el-button>
          </template>
          <template slot-scope="scope">
            <el-button type="text" v-if="!scope.row.isCheck" @click="checkOne(scope.row)">选择</el-button>
            <el-button type="text" disabled v-else>已选择</el-button>
          </template>
        </el-table-column>
        <el-table-column property="realname" label="姓名" width="70"/>
        <el-table-column property="gender" label="性别" width="50">
          <template slot-scope="scope">
            <el-tag v-if="parseInt(scope.row.gender) === 1">男</el-tag>
            <el-tag v-else>女</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" property="deptName" label="部门名称"/>
        <el-table-column align="center" property="jobNumber" label="员工编号"/>
        <el-table-column align="center" property="identityCard" label="身份证号"/>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        class="learn-drawer-range-box-buttons"
        :current-page="pagination.page"
        :pager-count="5"
        :page-sizes="[10, 20, 50]"
        :page-size="pagination.limit"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"
      />
    </el-col>
    <!--    批量导入-->
    <batch-import
      v-if="batchImportVisible"
      ref="batchImport"
      @uploadFile="uploadFile"
    />
  </el-row>
</template>

<script>
  import BatchImport from '../../views/modules/questions/batchimport'
  import SearchForm from '../search-form/search-form'

  export default {
    name: 'exam-type',
    data() {
      return {
        batchImportVisible: false,
        pagination: {
          page: 1,
          limit: 10
        },
        totalPage: 0,
        userList: []
      }
    },
    props: {
      examId: Number,
      setUserList: {
        type: Array,
        required: true
      },
      form: {
        type: Object,
        required: true
      },
      examTypeChange: {
        type: Function,
        required: true
      },
      examUserArrClose: {
        type: Function,
        required: true
      },
      setLoading: {
        type: Function,
        required: true
      },
      handleSelectionChange: {
        type: Function,
        required: true
      }
    },
    components: {SearchForm, BatchImport},
    methods: {
      // 批量导入
      batchImportHandle() {
        this.batchImportVisible = true
        this.$nextTick(() => {
          this.$refs.batchImport.init(7)
        })
      },
      clear() {
        this.setUserList.splice(this.setUserList)
        // let checkUserList = []
        this.userList.forEach(user => {
          let index = this.setUserList.findIndex(x => x.userId === user.userId)
          if (index === -1) {
            this.checkUserList = []
          }
          user.isCheck = false
        })
      },
      // 导入后文件处理
      async uploadFile(file) {
        let Loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.7)'
        })
        let data = new FormData()
        data.append('file', file)
        let res = await this.$http.post('/usercenter-admin/import/importPublisherUser', data)
        Loading.close()
        if (res && res.code === 200) {
          this.$notify.success({ title: '成功', message: res.data.message })
          let checkUserList = []
          res.data.userList.forEach(user => {
            let index = this.setUserList.findIndex(x => x.userId === user.userId)
            if (index === -1) {
              checkUserList.push(user)
            }
            user.isCheck = true
          })
          this.handleSelectionChange(checkUserList)
          // this.checkUserList.push(res.data)
          this.batchImportVisible = false
        } else {
          this.$notify.error({ title: '错误', message: res.msg })
        }
      },
      checkAll() {
        let checkUserList = []
        this.userList.forEach(user => {
          let index = this.setUserList.findIndex(x => x.userId === user.userId)
          if (index === -1) {
            checkUserList.push(user)
          }
          user.isCheck = true
        })
        this.handleSelectionChange(checkUserList)
      },
      checkOne(user) {
        user.isCheck = true
        this.handleSelectionChange([user])
      },
      setData(data) {
        this.userList = []
        data.forEach(user => {
          let index = this.setUserList.findIndex(x => x.userId === user.userId)
          if (index > -1) {
            user.isCheck = true
          } else {
            user.isCheck = false
          }
          this.userList.push(user)
        })
      },
      setTotalPage(total) {
        this.totalPage = total
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pagination.limit = val
        this.pagination.page = 1
        this.$refs.searchForm.search({
          userIds: this.setUserList.map(x => x.userId).join(',')
        })
      },
      setPage(val) {
        this.pagination.page = val
        this.$refs.searchForm.search({
          userIds: this.setUserList.map(x => x.userId).join(',')
        })
      },
      // 当前页
      currentChangeHandle(val) {
        this.pagination.page = val
        this.$refs.searchForm.search({
          userIds: this.setUserList.map(x => x.userId).join(',')
        })
      }
    }
  }
</script>

<style lang="scss">
  .exam-user-arr {
    padding: 10px;
    width: 100%;
    min-height: 150px;
    max-height: 300px;
    overflow-y: scroll;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    border-radius: 30px;
    border: 1px dashed #909399;
  }
</style>
